<template>
  <div>
    <van-nav-bar title="商家详情" fixed z-index="999" left-arrow @click-left="GOback" :border="false" placeholder />
    <!-- 活动属性 -->
    <div class="Attribute">
      <header class="shop_detail_title">活动与属性</header>
      <ul>
        <li v-for="item in DetailsData.activities" :key="item.id">
          <span :style="'background-color:'+'#'+item.icon_color">{{item.icon_name}}</span>
          <span>{{item.description}}(APP专享)</span>
        </li>
      </ul>
      <ul>
        <li v-for="item in DetailsData.supports" :key="item.id">
          <span :style="'background-color:'+'#'+item.icon_color+';'">{{item.icon_name}}</span>
          <span>{{item.description}}(APP专享)</span>
        </li>
      </ul>
    </div>
    <!-- 食品监督 -->
    <section class="shop_status_container">
      <header class="shop_status_header" @click="PushSafe(DetailsData.status)">
        <span class="shop_detail_title">食品监督安全公示</span>
        <div>
          <span class="identification_detail">企业认证详情</span>
          <van-icon name="arrow" />
        </div>
      </header>
      <section class="shop_statu_detail">
        <div>
          <van-icon name="smile" size="2rem" color="#7ed321" v-if="DetailsData.status ===1" />
          <img src="./chaping.svg" alt="" class="van-icon-smile" v-if="DetailsData.status ===0" width="45px">
        </div>
        <div class="check_date">
          <p class="check_p">
            <span>监督检查结果：</span>
            <span class="shop_status_well" v-if="DetailsData.status ===1">良好</span>
            <span style="color:red;" v-if="DetailsData.status ===0">差</span>
          </p>
          <p>
            <span>检查日期：</span>
          </p>
        </div>
      </section>
    </section>
    <!-- 商家信息 -->
    <section class="shop_status_info">
      <header>商家信息</header>
      <p>{{DetailsData.name}}</p>
      <p>地址: {{DetailsData.address}}</p>
      <p v-if="DetailsData.opening_hours">营业时间：{{DetailsData.opening_hours[0]}}</p>
      <p @click="show = true">
        <span>营业执照</span>
        <van-icon name="arrow" />
      </p>
      <p @click="show1 = true">
        <span>餐饮服务许可证</span>
        <van-icon name="arrow" />
      </p>
    </section>
    <van-overlay z-index="10000" :show="show" @click="show = false">
      <template #default>
        <img class="overlayimg" :src="'//elm.cangdu.org/img/'+DetailsData.license.business_license_image" alt="">
      </template>
    </van-overlay>
    <van-overlay z-index="10000" :show="show1" @click="show1 = false">
      <template #default>
        <img class="overlayimg" :src="'//elm.cangdu.org/img/'+DetailsData.license.catering_service_license_image" alt="">
      </template>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['DetailsData'])
  },
  data() {
    return {
      show: false,
      show1: false
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    showPopup() {
      this.show = true
    },
    //点击就会弹窗
    showxuke() {
      this.show1 = true
    },
    PushSafe(status) {
      this.$router.push('/Details/DetailShang/shopSafe')
      window.sessionStorage.setItem('status', status)
    }
  },
  mounted() {
    //餐馆详情数据
    this.$store.dispatch('getDetails', window.sessionStorage.getItem('shopid'))
  }
}
</script>

<style lang="less" scoped>
.overlayimg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.van-icon-arrow {
  color: rgb(187, 187, 187);
  font-size: 0.7rem;
  vertical-align: middle;
}
.Attribute {
  background-color: #fff;
  margin-bottom: 0.4rem;
  padding-bottom: 0.6rem;
  > header {
    line-height: 1.8rem;
    padding-left: 0.6rem;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 0.4rem;
  }
  ul {
    padding: 0 0.6rem;
    li {
      margin-bottom: 0.5rem;
      span:nth-child(1) {
        font-size: 0.45rem;
        color: #fff;
        padding: 0.1rem;
        border: 1px;
        border-radius: 0.1rem;
        margin-right: 0.4rem;
      }
      span:nth-child(2) {
        font-size: 0.55rem;
        color: #666;
      }
    }
  }
}

.shop_status_info p:nth-of-type(4) {
  display: flex;
  justify-content: space-between;
}
.shop_status_info p:nth-of-type(5) {
  display: flex;
  justify-content: space-between;
}

.van-cell__value {
  font-size: 0.6rem;
  color: #666;
}
</style>